import { h, init } from 'snabbdom'
import { classModule } from 'snabbdom/modules/class'
import { styleModule } from 'snabbdom/modules/style'

document.getElementById('rank').addEventListener('click',rank)
document.getElementById('add').addEventListener('click',add)
document.getElementById('unRank').addEventListener('click',unRank)


let dataLength = 5
let sort = 1
function buildData(){
  const data = []
  for (let index = 0; index < dataLength; index++) {
    data.push(h('div',[
      h('span.c1',{key:index},'rank：' + (index + 1)),
      h('span.c2',{key:index},'内容（倒序的rank）：' + (dataLength - index))
    ]))
  }
  if(sort !== 1){
    data.reverse()
  }
  return data
}

function add(){
  dataLength++
  update()
}
function rank(){
  console.log(1)
  sort = 1
  update()
}
function unRank(){
  sort = -1
  update()
}


const patch = init([classModule,styleModule])

let vnode = h('div#container', buildData())

let app = document.querySelector('#app')

let oldVnode = patch(app, vnode)

function update(){
  oldVnode = patch(oldVnode, h('div#container', buildData()))
}
